<template>
  <div>
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <title>
          品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
        </title>
        <meta
          name="description"
          content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
        />
        <meta
          name="Keywords"
          content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
        />
        <link rel="shortcut icon" href="favicon.ico" />
      </head>

      <body>
        <div class="topnav">
          <div class="mainnav w">
            <div class="fl">
              <a href="#"><i> </i>广东</a>
            </div>
            <div class="fr">
              <ul>
                <li>
                  <a href="#">你好，请登录</a>
                  <a href="#" class="style_red"> 免费注册</a>
                </li>
                <li class="spacer"></li>
                <li><a href="#">我的订单</a></li>
                <li class="spacer"></li>
                <li><a href="#">我的订单</a></li>
                <li class="spacer"></li>
                <li><a href="#">我的京东 </a></li>
                <li class="spacer"></li>
                <li><a href="#">京东会员</a></li>
                <li class="spacer"></li>
                <li><a href="#" class="style_red">企业采购 </a></li>
                <li class="spacer"></li>
                <li><a href="#">客户服务 </a></li>
                <li class="spacer"></li>
                <li><a href="#">网站导航 </a></li>
                <li class="spacer"></li>
                <li><a href="#">手机京东</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="header">
          <div class="container w">
            <div class="logo">
              <h1>
                <a href="index.html" title="京东">京东</a>
              </h1>
            </div>
            <div class="search">
              <input type="text" value="你还好吗" />
              <button>搜索</button>
            </div>
            <div class="car">
              <a href="#"><i> </i>我的购物车</a>
              <em>1</em>
            </div>
            <img src="./upload/erweima.png" alt="" class="erweima" />
            <div class="subnav">
              <ul>
                <li><a href="#" class="style_red">奢侈品七夕</a></li>
                <li><a href="#">有机</a></li>
                <li><a href="#">图书钜惠</a></li>
                <li><a href="#">二手手机</a></li>
                <li><a href="#">七夕好礼</a></li>
                <li><a href="#">0元限量</a></li>
                <li><a href="#">七夕攻略</a></li>
                <li><a href="#">喷雾器</a></li>
                <li><a href="#">手配好物</a></li>
              </ul>
            </div>
            <div class="menu">
              <ul>
                <li><a href="#" class="style_red">秒杀</a></li>
                <li><a href="#" class="style_red">优惠券</a></li>
                <li><a href="#">PLUS会员</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">京东家电</a></li>
                <li><a href="#">京东超市</a></li>
                <li><a href="#">京东生鲜</a></li>
                <li><a href="#">京东国际</a></li>
                <li><a href="#">京东金融</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="main w">
          <div class="leftsidebar fl">
            <ul>
              <li><a href="#">家用电器</a></li>
              <li><a href="#">手机 / 运营商 / 数码</a></li>
              <li><a href="#">电脑 / 办公</a></li>
              <li><a href="#">家居 / 家具 / 家装 / 厨具</a></li>
              <li><a href="#">男装 / 女装 / 童装 / 内衣</a></li>
              <li><a href="#">美妆 / 个护清洁 / 宠物</a></li>
              <li><a href="#">女鞋 / 箱包 / 钟表 / 珠宝</a></li>
              <li><a href="#">男鞋 / 运动 / 户外</a></li>
              <li><a href="#">房产 / 汽车 / 汽车用品</a></li>
              <li><a href="#">母婴 / 玩具乐器</a></li>
              <li><a href="#">食品 / 酒类 / 生鲜 / 特产</a></li>
              <li><a href="#">艺术 / 礼品鲜花 / 农资绿植</a></li>
              <li><a href="#">医药保健 / 计生情趣</a></li>
              <li><a href="#">图书 / 文娱 / 教育 / 电子书</a></li>
              <li><a href="#">机票 / 酒店 / 旅游 / 生活</a></li>
              <li><a href="#">理财 / 众筹 / 白条 / 保险</a></li>
              <li><a href="#">安装 / 维修 / 清洗 / 二手</a></li>
              <li><a href="#">工业品</a></li>
            </ul>
          </div>
          <div class="scroll_column fl">
            <a href="#"><img src="./upload/scroll-column-1.jpg" alt="" /></a>
          </div>
          <div class="scroll_img fl">
            <ul>
              <li>
                <a href="#"><img src="./upload/scroll-img-1.jpg" alt="" /></a>
              </li>
              <li class="scroll_img_tips">
                <a href="#"><img src="./upload/scroll-img-2.jpg" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./upload/scroll-img-3.jpg" alt="" /></a>
              </li>
            </ul>
          </div>
          <div class="rightsidebar fl">
            <div class="login">
              <div class="login_top">
                <i></i>
                <p>
                  <em>Hi~欢迎逛京东！</em>
                  <a href="#">登录</a> | <a href="#">注册</a>
                </p>
              </div>
              <div class="login_btm">
                <a href="#" class="fl">新人福利</a>
                <a href="#" class="fr">PLUS会员</a>
              </div>
            </div>
            <div class="hot">
              <h4>京东快报<a href="#">更多 </a></h4>
              <ul>
                <li>
                  <a href="#"><em>HOT</em>雀巢“治愈系”咖啡，唤醒你的困倦时刻</a>
                </li>
                <li>
                  <a href="#"
                    ><em>最新</em>什么是宝宝“转奶”？掌握这些要点才安心</a
                  >
                </li>
                <li>
                  <a href="#"
                    ><em>热评</em>360°无死角吸尘，清洁力秒杀大牌渣渣</a
                  >
                </li>
                <li>
                  <a href="#"><em>热门</em>酸奶我pick蒙牛纯甄小</a>
                </li>
              </ul>
            </div>
            <div class="link">
              <lu>
                <li>
                  <a href="#">
                    <i class="link_1"></i>
                    <p>话费</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_2"></i>
                    <p>机票</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_3"></i>
                    <p>酒店</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_4"></i>
                    <p>游戏</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_5"></i>
                    <p>加油卡</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_6"></i>
                    <p>火车票</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_7"></i>
                    <p>众筹</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_8"></i>
                    <p>理财</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_9"></i>
                    <p>白条</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_10"></i>
                    <p>电影票</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_11"></i>
                    <p>企业购</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="link_12"></i>
                    <p>礼品卡</p>
                  </a>
                </li>
              </lu>
            </div>
          </div>
        </div>

        <div class="seckill w">
          <lu>
            <li class="j_seckill">
              <a href="#">
                <img src="./upload/seckill-1.jpg" alt="" />
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/seckill-2.jpg" alt="" />
                <p>
                  【多款可选】休闲百搭连衣裙女装2020年夏季女装新款时尚休闲套装宽松显瘦韩版时尚裙子潮
                  图片色 M
                </p>
                <div class="jiage">
                  <span class="jiage_left fl"><i>¥</i><span>929.00</span></span>
                  <span class="jiage_right fl"
                    ><del><i>¥</i>1199.00</del></span
                  >
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/seckill-3.jpg" alt="" />
                <p>
                  【多款可选】休闲百搭连衣裙女装2020年夏季女装新款时尚休闲套装宽松显瘦韩版时尚裙子潮
                  图片色 M
                </p>
                <div class="jiage">
                  <span class="jiage_left fl"><i>¥</i><span>929.00</span></span>
                  <span class="jiage_right fl"
                    ><del><i>¥</i>1199.00</del></span
                  >
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/seckill-4.jpg" alt="" />
                <p>
                  【多款可选】休闲百搭连衣裙女装2020年夏季女装新款时尚休闲套装宽松显瘦韩版时尚裙子潮
                  图片色 M
                </p>
                <div class="jiage">
                  <span class="jiage_left fl"><i>¥</i><span>929.00</span></span>
                  <span class="jiage_right fl"
                    ><del><i>¥</i>1199.00</del></span
                  >
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/seckill-5.jpg" alt="" />
                <p>
                  【多款可选】休闲百搭连衣裙女装2020年夏季女装新款时尚休闲套装宽松显瘦韩版时尚裙子潮
                  图片色 M
                </p>
                <div class="jiage">
                  <span class="jiage_left fl"><i>¥</i><span>929.00</span></span>
                  <span class="jiage_right fl"
                    ><del><i>¥</i>1199.00</del></span
                  >
                </div>
              </a>
            </li>
            <li class="list">
              <a href="#">
                <img src="./upload/seckill-6.jpg" alt="" />
                <h4>周日放价</h4>
                <em>特惠100元</em>
              </a>
              <a href="#" class="pinlei">品类秒杀 </a>
              <div><i class="current"></i><i></i></div>
            </li>
          </lu>
        </div>

        <div class="tejia w">
          <div class="everyday fl">
            <div class="everyday_top">
              <h3>每日特价 <i></i></h3>
              <ul>
                <li><a href="#">精选</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">百货</a></li>
                <li><a href="#">个护</a></li>
                <li><a href="#">预告</a></li>
              </ul>
            </div>
            <div class="everyday_left fl">
              <a href="#">
                <img src="./upload/everyday-1.jpg" alt="" />
                <p>卡姿兰立体双头修容棒</p>
                <p>
                  <em><i>¥</i>54</em> <del><i>¥</i>128</del>
                </p>
              </a>
            </div>
            <div class="everyday_rgiht fr">
              <ul>
                <li>
                  <a href="#">
                    <img src="./upload/everyday-2.jpg" alt="" />
                    <div>
                      <p>烘焙坚果水果燕麦片400g</p>
                      <em><i>¥</i>13.6</em>
                      <p><del>¥20.8</del></p>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./upload/everyday-3.jpg" alt="" />
                    <div>
                      <p>烘焙坚果水果燕麦片400g</p>
                      <em><i>¥</i>13.6</em>
                      <p><del>¥20.8</del></p>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./upload/everyday-4.jpg" alt="" />
                    <div>
                      <p>烘焙坚果水果燕麦片400g</p>
                      <em><i>¥</i>13.6</em>
                      <p><del>¥20.8</del></p>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./upload/everyday-5.jpg" alt="" />
                    <div>
                      <p>烘焙坚果水果燕麦片400g</p>
                      <em><i>¥</i>13.6</em>
                      <p><del>¥20.8</del></p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="brand fr">
            <div class="brand_left fl">
              <h3>品牌闪购 <i></i></h3>
              <a href="#">
                <div>
                  <img src="./upload/brand-1.jpg" alt="" />
                  <b class="css3"></b>
                </div>
              </a>
            </div>
            <div class="brand_right fl">
              <ul>
                <li>
                  <a href="#">
                    <img src="./upload/brand-2.jpg" alt="" />
                    <p>361度运动专场</p>
                    <i class="css3"></i>
                  </a>
                </li>
                <li class="bor-left">
                  <a href="#">
                    <img src="./upload/brand-3.jpg" alt="" />
                    <p>361度运动专场</p>
                    <i class="css3"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./upload/brand-4.jpg" alt="" />
                    <p>361度运动专场</p>
                    <i class="css3"></i>
                  </a>
                </li>
                <li class="bor-left">
                  <a href="#">
                    <img src="./upload/brand-5.jpg" alt="" />
                    <p>361度运动专场</p>
                    <i class="css3"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./upload/brand-6.jpg" alt="" />
                    <p>361度运动专场</p>
                    <i class="css3"></i>
                  </a>
                </li>
                <li class="bor-left">
                  <a href="#">
                    <img src="./upload/brand-7.jpg" alt="" />
                    <p>361度运动专场</p>
                    <i class="css3"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="msg">
            <div class="msg_menu w">
              <ul>
                <li><i class="duo"></i>多品类齐全，轻松购物</li>
                <li><i class="kuai"></i>多仓直发，极速配送</li>
                <li><i class="hao"></i>正品行货，精致服务</li>
                <li><i class="sheng"></i>天天低价，畅选无忧</li>
              </ul>
            </div>
          </div>
          <div class="summary w">
            <dl class="mod_help_nav">
              <dt>购物指南</dt>
              <dd>购物流程</dd>
              <dd>会员介绍</dd>
              <dd>生活旅行</dd>
              <dd>常见问题</dd>
              <dd>大家电</dd>
              <dd>联系客服</dd>
            </dl>
            <dl class="mod_help_nav">
              <dt>配送方式</dt>
              <dd>上门自提</dd>
              <dd>211限时达</dd>
              <dd>配送服务查询</dd>
              <dd>配送费收取标准</dd>
              <dd>海外配送</dd>
            </dl>
            <dl class="mod_help_nav">
              <dt>支付方式</dt>
              <dd>货到付款</dd>
              <dd>在线支付</dd>
              <dd>分期付款</dd>
              <dd>公司转账</dd>
            </dl>
            <dl class="mod_help_nav">
              <dt>售后服务</dt>
              <dd>售后政策</dd>
              <dd>价格保护</dd>
              <dd>退款说明</dd>
              <dd>返修/退换货</dd>
              <dd>取消订单</dd>
            </dl>
            <dl class="mod_help_nav">
              <dt>特色服务</dt>
              <dd>夺宝岛</dd>
              <dd>DIY装机</dd>
              <dd>延保服务</dd>
              <dd>京东E卡</dd>
              <dd>京东通信</dd>
              <dd>京鱼座智能</dd>
            </dl>
            <dl class="mod_help_con">
              <dt>京东自营覆盖区县</dt>
              <dd>
                <p>
                  京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷
                  卡和售后上门服务。
                </p>
                <p class="mod_help_cover_more"><a href="#">查看详情</a></p>
              </dd>
            </dl>
          </div>
          <div class="inner">
            <div class="service">
              <a href="#">关于我们</a>| <a href="#">联系我们</a>|
              <a href="#">联系客服</a>| <a href="#">合作招商</a>|
              <a href="#">商家帮助</a>| <a href="#">营销中心</a>|
              <a href="#">手机京东</a>| <a href="#">友情链接</a>|
              <a href="#">销售联盟</a>| <a href="#">京东社区</a>|
              <a href="#">风险监测</a>| <a href="#">隐私政策</a>|
              <a href="#">京东公益</a>| <a href="#">English Site</a>|
              <a href="#">Media & IR</a>
            </div>
            <div class="note">
              <p>
                京公网安备
                11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零
                字第大120007号
              </p>
              <p>
                互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155
              </p>
              <p>
                Copyright © 2004 - 2020 京东JD.com
                版权所有|消费者维权热线：4006067733经营证照|(京)网械平台备字
              </p>
              <p>2018第00003号|营业执照</p>
              <p>
                Global Site|Сайт России|Situs Indonesia|Sitio de
                España|เว็บไซต์ประเทศไทย
              </p>
              <p>京东旗下网站：京东钱包|京东智联云</p>
            </div>
            <div class="guild">
              <a href="#" class="guild_1"
                ><i></i><em>可信网站<br />信用评估</em></a
              >
              <a href="#" class="guild_2"
                ><i></i><em>网络警察<br />提醒你</em></a
              >
              <a href="#" class="guild_3"><i></i><em>诚信网站</em></a>
              <a href="#" class="guild_4"
                ><i></i><em>网上有害信<br />息举报专区</em></a
              >
              <a href="#" class="guild_5"
                ><i></i><em>网络举报<br />APP下载</em></a
              >
              <a href="#" class="guild_6"
                ><i></i><em>扫黄打非网<br />举报专区</em></a
              >
            </div>
          </div>
        </div>
      </body>
    </html>
  </div>
</template>
<script>
import './css/base.css'
import './css/common.css'
import './css/index.css'
export default {
  data () {
    return {
    }
  }
}
</script>
<style scoped>
</style>
